﻿Ext.onReady(function() {
var viewport = new Ext.Viewport({
    layout: 'border',
    items: [{
        region: 'center',
        id: 'wizard',
        width: 200,
        title: '某某向导',
        layout: 'card',
        activeItem: 0, //默认激活索引为0的卡片
        bodyStyle: 'padding:2px',
        border: false, //容器外部边框，效果可以改为true后比较
        defaults: {
            border: false //卡片内部显示边框，效果可以改为true后比较
        },
        bbar: [{   //bottom 工具栏设置
            id: 'move-prev',
            text: '上一步',
            handler: navHandler.createDelegate(this, [-1]), //点击上一步时调用的处理函数
            disabled: true
        }, '->', {
            id: 'move-next',
            text: '下一步',
            handler: navHandler.createDelegate(this, [1]) //点击下一步时调用的处理函
        }],
            items: [{
                id: 'card-0',
                html: '<h1>哈哈！<br />欢迎用咱的向导。</h1><p>第一步，一共三步</p>'
            }, {
                id: 'card-1',
                html: '<p>第二步，一共三步</p>'
            }, {
                id: 'card-2',
                html: '<h1>恭喜恭喜，完成了。</h1><p>第三步，一共三步，最后一步了。</p>'
                }]
      }]
            });
        });




/* boder布局*/
/*
Ext.onReady(function() {
var width = window.screen.availWidth;
var height = window.screen.availHeight;
alert(height);
Ext.create('Ext.panel.Panel', {
title: 'Ext.layout.container.Border布局示例',
layout: 'border',
frame: false,
height: 600,
width: width,
flex: 1,
renderTo: Ext.getBody(),
defaults: {//设置默认属性   
collapsible: true
},
items: [{
title: 'North Panel',
html: '上边',
region: 'north', //指定子面板所在区域为north   
height: 80
}, {
title: 'South Panel',
html: '下边',
region: 'south', //指定子面板所在区域为south   
height: 80
}, {
title: 'West Panel',
html: '左边',
region: 'west', //指定子面板所在区域为west   
width: 150
}, {
title: 'east Panel',
html: '右边',
region: 'east', //指定子面板所在区域为east   
width: 160
}, {
title: 'Main Content',
html: '中间',
region: 'center'//指定子面板所在区域为center   
}]
});
});
*/

/*accordion布局*/
/*
Ext.onReady(function() {
Ext.create('Ext.Panel', {
title: '容器面板',
renderTo: 'divBody',
width: 400,
height: 300,
layout: 'accordion',
items: [{
tools: [{ type: 'gear', handler: function() {
Ext.Msg.alert('提示', '配置按钮被点击。');
}
}, { type: 'refresh'}],
title: '面板1',
xtype: "panel",
html: "子元素1"

}, {
title: '面板2',
xtype: "panel",
html: "子元素2"
}, {
id: 'panel3',
title: '面板3',
xtype: "panel",
html: "子元素3"
}]
});
Ext.create("Ext.Button", {
renderTo: 'div2',
text: "打开第三页",
handler: function() {
Ext.getCmp('panel3').expand(true);
}
});
});
    
*/